<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="开始日期" prop="beginDate">
        <el-date-picker
            @change="change"
              v-model="queryParams.beginDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker
            @change="change"
              v-model="queryParams.endDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客户名称" prop="cusName">
        <el-input v-model="queryParams.cusName" placeholder="请输入客户名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="证件号码" prop="idCard">
        <el-input v-model="queryParams.idCard" placeholder="请输入证件号码" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="营销反馈" prop="recordDesc">
        <el-select v-model="queryParams.recordDesc" placeholder="请选择营销任务类型" clearable size="small">
          <el-option label="有意向" value="有意向" />
          <el-option label="无意向" value="无意向" />
          <el-option label="不建议" value="不建议" />
        </el-select>
      </el-form-item>

      <el-form-item label="任务类型" prop="taskType">
        <el-select v-model="queryParams.taskType" placeholder="请选择营销任务类型" clearable size="small">
          <el-option v-for="dict in taskTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="客户类型" prop="ifGroup">
        <el-select v-model="queryParams.ifGroup" placeholder="请选择目标客户类型" clearable size="small">
          <el-option v-for="dict in ifGroupOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="管户机构" prop="orgId">
        <el-select v-model="queryParams.orgId" @change="orgIdBlur(queryParams.orgId)" clearable placeholder="请选择"><el-option v-for="item in orgList" :key="item.value" :label="item.orgName" :value="item.orgId"></el-option></el-select>
      </el-form-item>
      <el-form-item label="管户经理" prop="userId">
        <el-select v-model="queryParams.userId" clearable placeholder="请选择"><el-option v-for="item in mangerList" :key="item.value" :label="item.nickName" :value="item.userName"></el-option></el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="isBack">
        <el-select v-model="queryParams.isBack" placeholder="请选择状态" clearable size="small">
          <el-option v-for="dict in isBackOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="营销状态" prop="complete">
        <el-select v-model="queryParams.complete" placeholder="请选择营销状态" clearable size="small">
          <el-option v-for="dict in completeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务来源" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择任务来源" clearable size="small">
          <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['buss:marketTaskList:add']">新增</el-button></el-col> -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['buss:marketTaskList:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['buss:marketTaskList:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['buss:marketTaskList:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="marketTaskListList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务名称" width="200" :show-overflow-tooltip="true" align="center" prop="taskName" />
      <el-table-column label="客户证件" width="200" align="center" prop="idCard" />
      <el-table-column label="客户名称" align="center" prop="cusName" />
      <!-- <el-table-column label="营销任务类型" width="150" align="center" prop="taskType" :formatter="taskTypeFormat" /> -->
      <!-- <el-table-column label="目标客户类型" width="150" align="center" prop="ifGroup" :formatter="ifGroupFormat" /> -->
      <el-table-column label="营销反馈" align="center" prop="recordDesc" :show-overflow-tooltip="true" />
      <!-- <el-table-column label="营销目标" width="200" align="center" prop="taskTarget" :show-overflow-tooltip="true" /> -->
      <el-table-column label="任务开始时间" width="200" align="center" prop="beginDate" />
      <el-table-column label="任务结束时间" width="200" align="center" prop="endDate" />
      <el-table-column label="营销状态" align="center" prop="complete" :formatter="completeFormat" />
      <el-table-column label="机构ID" align="center" prop="orgId" :formatter="orgIdFormat" />
      <el-table-column label="客户经理" align="center" prop="userName" />
      <!-- <el-table-column label="任务来源" align="center" prop="type" :formatter="typeFormat" /> -->
      <el-table-column label="退回状态" align="center" prop="isBack" :formatter="isBackFormat" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['buss:marketTaskList:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['buss:marketTaskList:remove']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleReturn(scope.row)" v-hasPermi="['buss:taskInfo:taskReturn']">退回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改营销客户列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">


        <div>
          <el-col :span="24">
            <div class="block">
              <el-timeline v-for="item in yxList">
                <el-timeline-item :reverse="true" :timestamp="item.createTime" placement="top">
                  <el-card>

                    <div>
                      <el-col :span="12">
                        <div style="margin: 1.5625rem;font-size: 14px;">
                          <el-form-item label="客户证件" prop="idCard">
                            <el-input v-model="item.idCard" placeholder="请输入客户证件" :disabled="isDis" clearable :style="{ width: '100%' }"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                    </div>

                    <div>
                      <el-col :span="12">
                        <div style="margin: 1.5625rem;font-size: 14px;">
                          <el-form-item label="客户名称" prop="cusName">
                            <el-input v-model="item.userName" placeholder="请输入客户名称" :disabled="isDis" clearable :style="{ width: '100%' }"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                    </div>

                    <div>
                      <el-col :span="24">
                        <div style="margin: 1.5625rem;font-size: 14px;">
                          <el-form-item label="营销反馈" prop="recordDesc"><el-input type="textarea" :disabled="isDis" :rows="2" placeholder="请输入营销反馈" v-model="item.recordDesc"></el-input></el-form-item>
                        </div>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="24">
                        <div style="margin: 1.5625rem;font-size: 14px;">
                          <el-form-item label="营销图片" prop="recordPic">
                            <el-upload
                              action="void"
                              list-type="picture-card"
                              :multiple="true"
                              :on-preview="handlePictureCardPreview"
                              :http-request="upLoadOnSelf"
                              :before-upload="upLoadbefore"
                              :file-list="item.pcFileList"
                              :on-remove="handleRemove">
                              <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                              <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                          </el-form-item>
                        </div>
                      </el-col>
                    </div>
                  </el-card>
                </el-timeline-item>

              </el-timeline>
            </div>
          </el-col>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<script>
import { listMarketTaskList, getMarketTaskList, delMarketTaskList, addMarketTaskList, taskReturn,
 updateMarketTaskList, listTaskExRecord, fileUpload, delExImage, insertTaskExRecord, updateExImage, updateExInfo } from '@/api/buss/marketTaskList';
import { orglist, queryManager } from '@/api/buss/sqzxt';
import { getToken } from '@/utils/auth'
export default {
  name: 'MarketTaskList',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      isDis: true,
      // 非单个禁用
      single: true,
      upLoadHeader: {},
      dialogImageUrl: 'http://58.213.192.164:5009/jzyx/download/file?filePath=/2021/08/10/a7f8b3272735cff1c9bfe84a2208fbe6/609674591547162624.jpg',
      dialogVisible: false,
      // 非多个禁用
      multiple: true,
      mangerList: [],
      orgList: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      url: 'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
      filelist: [],
      picEx: [
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg',
        'http://32.14.33.6:5009/jzyx/download/file?filePath=/2021/08/06/034d9b452c5af3f197f0a5a3061934c6/608319195771305984.jpg'
      ],
      // 营销客户列表表格数据
      marketTaskListList: [],
      taskTypeList: [
        {
          value: '0',
          label: '总行营销任务'
        },
        {
          value: '1',
          label: '个人营销任务'
        }
      ],
      taskTypevalue: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // ID字典
      taskIdOptions: [],
      // 任务名称字典
      taskNameOptions: [],
      // 营销任务类型(0总行，1个人)字典
      taskTypeOptions: [],
      // 目标客户类型字典
      ifGroupOptions: [],
      // 任务开始时间字典
      beginDateOptions: [],
      // 任务结束时间字典
      endDateOptions: [],
      // 已营销客户数字典
      finishNumOptions: [],
      // 客户经理字典
      userIdOptions: [],
      // 添加时间字典
      createTimeOptions: [],
      // 修改时间字典
      updateTimeOptions: [],
      // 添加人字典
      createUserOptions: [],
      // 操作员字典
      updateUserOptions: [],
      // 状态  0不正常  1正常字典
      isBackOptions: [],
      // 备注字典
      remarkOptions: [],
      // 营销目标字典
      taskTargetOptions: [],
      // 机构ID字典
      orgIdOptions: [],
      // 营销状态  0未完成  1已完成字典
      completeOptions: [],
      // 任务来源字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskName: null,
        taskType: null,
        ifGroup: null,
        beginDate: null,
        endDate: null,
        finishNum: null,
        createTime: null,
        updateTime: null,
        createUser: null,
        updateUser: null,
        isBack: null,
        remark: null,
        taskTarget: null,
        orgId: '',
        userId: '',
        dgds:null,
        complete: null,
        type: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      newFile: new FormData(),
      yxList: [],
      pcExpics: [],
      picInsert: [],
      taskID: '',
      idCard: '',
      exId: '',
      manger: {
        orgId: ''
      },
    };
  },
  created() {
    this.getList();

    this.getDicts('task_type').then(response => {
      this.taskTypeOptions = response.data;
    });
    this.getDicts('ifGroup').then(response => {
      this.ifGroupOptions = response.data;
    });

    this.getDicts('sys_user_id').then(response => {
      this.userIdOptions = response.data;
    });

    this.getDicts('task_isBack').then(response => {
      this.isBackOptions = response.data;
    });

    this.getDicts('sys_org_id').then(response => {
      this.orgIdOptions = response.data;
    });
    this.getDicts('task_complete').then(response => {
      this.completeOptions = response.data;
    });
    this.getDicts('type').then(response => {
      this.typeOptions = response.data;
    });
  },
  methods: {
    /** 查询营销客户列表列表 */
    getList() {
      this.loading = true;
      this.upLoadHeader = {
        Authorization: 'Bearer ' + getToken()
      }
      listMarketTaskList(this.queryParams).then(response => {
        this.marketTaskListList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      //下拉机构
      orglist().then(response => {
        this.orgList = response.rows;
      });
    },
    upLoadbefore(fileParam) {
      //console.log()
    },
    change() {
      var bgd = this.queryParams.beginDate.split("-");
      var bj = bgd.join("")
      var edb = this.queryParams.endDate.split("-");
      var ej = edb.join("")

      },
    upLoadOnSelf(fileParam) {
      let fromData = this.newFile;
      fromData.append('file',fileParam.file)
      console.log(JSON.stringify(fileParam))
      console.log(fromData)
      fileUpload(fromData).then(response => {
        this.picInsert.push(response.data.pcUrl);
        fromData.delete("file");
        var insertData = {
          taskId: this.taskID,
          idCard: this.idCard,
          exId: this.exId,
          exPic: response.data.url,
        }
        console.log(insertData)
        updateExImage(insertData).then(response => {
          this.msgSuccess('图片修改成功');
        });
        console.log(JSON.stringify(response))
      });

    },
    handleRemove(file, fileList) {

      var delData = {
        exId: file.name,
        exPic: file.url
      }

      this.$confirm('是否确认删除当前图片?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        delExImage(delData).then(response => {
          console.log(JSON.stringify(response))
        });
      }).catch(() => {});

    },
    handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
    },
    //客户经理
    orgIdBlur(mg) {
      this.manger.orgId = mg;
      queryManager(this.manger).then(response => {
        this.mangerList = response.rows;
      });
    },
    // ID字典翻译
    taskIdFormat(row, column) {
      return this.selectDictLabel(this.taskIdOptions, row.taskId);
    },
    // 任务名称字典翻译
    taskNameFormat(row, column) {
      return this.selectDictLabel(this.taskNameOptions, row.taskName);
    },
    // 营销任务类型(0总行，1个人)字典翻译
    taskTypeFormat(row, column) {
      return this.selectDictLabel(this.taskTypeOptions, row.taskType);
    },
    // 目标客户类型字典翻译
    ifGroupFormat(row, column) {
      return this.selectDictLabel(this.ifGroupOptions, row.ifGroup);
    },
    // 任务开始时间字典翻译
    beginDateFormat(row, column) {
      return this.selectDictLabel(this.beginDateOptions, row.beginDate);
    },
    // 任务结束时间字典翻译
    endDateFormat(row, column) {
      return this.selectDictLabel(this.endDateOptions, row.endDate);
    },
    // 已营销客户数字典翻译
    finishNumFormat(row, column) {
      return this.selectDictLabel(this.finishNumOptions, row.finishNum);
    },
    // 客户经理字典翻译
    userIdFormat(row, column) {
      return this.selectDictLabel(this.userIdOptions, row.userId);
    },
    // 添加时间字典翻译
    createTimeFormat(row, column) {
      return this.selectDictLabel(this.createTimeOptions, row.createTime);
    },
    // 修改时间字典翻译
    updateTimeFormat(row, column) {
      return this.selectDictLabel(this.updateTimeOptions, row.updateTime);
    },
    // 添加人字典翻译
    createUserFormat(row, column) {
      return this.selectDictLabel(this.createUserOptions, row.createUser);
    },
    // 操作员字典翻译
    updateUserFormat(row, column) {
      return this.selectDictLabel(this.updateUserOptions, row.updateUser);
    },
    // 状态  0不正常  1正常字典翻译
    isBackFormat(row, column) {
      return this.selectDictLabel(this.isBackOptions, row.isBack);
    },
    // 备注字典翻译
    remarkFormat(row, column) {
      return this.selectDictLabel(this.remarkOptions, row.remark);
    },
    // 营销目标字典翻译
    taskTargetFormat(row, column) {
      return this.selectDictLabel(this.taskTargetOptions, row.taskTarget);
    },
    // 机构ID字典翻译
    orgIdFormat(row, column) {
      return this.selectDictLabel(this.orgIdOptions, row.orgId);
    },
    // 营销状态  0未完成  1已完成字典翻译
    completeFormat(row, column) {
      return this.selectDictLabel(this.completeOptions, row.complete);
    },
    // 任务来源字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.filelist = []
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        taskId: null,
        taskName: null,
        taskType: null,
        ifGroup: null,
        beginDate: null,
        endDate: null,
        finishNum: null,
        userId: null,
        createTime: null,
        updateTime: null,
        createUser: null,
        updateUser: null,
        isBack: null,
        remark: null,
        taskTarget: null,
        orgId: null,
        complete: null,
        type: null
      };
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.taskId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;

    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = '添加营销客户列表';
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const taskId = row.taskId || this.ids;
      //console.log(JSON.stringify(row));
      this.form.idCard = row.idCard;
      this.form.cusName = row.cusName;
      this.form.recordDesc = row.recordDesc;
      this.taskID = row.taskId;
      this.idCard = row.idCard;
      this.exId = row.exId;

      listTaskExRecord({idCard: row.idCard,taskID: ''}).then(response => {
          this.yxList = response.rows;

          //this.pcExpics = response.rows.pcExpics;
          if(this.yxList.length > 0){
            this.open = true;
            this.title = '修改营销客户列表';
            for (var i = 0; i < this.yxList.length; i++) {
              if(i == 0){
                this.isDis = false;
              }
            }

          }else{
            this.msgSuccess('请先去营销');
          }
      });
    },
    /**退回操作*/
    handleReturn(row) {
      this.reset();
      const taskId = row.taskId || this.ids;
      this.form.idCard = row.idCard;
      this.form.cusName = row.cusName;
      this.form.recordDesc = row.recordDesc;
      this.taskID = row.taskId;
      this.idCard = row.idCard;
      this.exId = row.exId;
      var _this = this;
      this.$confirm('是否确认退回任务?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
          taskReturn({idCard: row.idCard,taskId: row.taskId,taskExRecordId: row.exId}).then(response => {
              _this.msgSuccess(response.msg);
          });
      }).catch(() => {});

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        var insertData = {
          exId: this.exId,
          recordDesc: this.yxList[0].recordDesc
        }
        console.log(insertData)
        updateExInfo(insertData).then(response => {
          this.msgSuccess('修改成功');
          this.open = false;
          this.filelist = []
          this.getList();
        });
        // if (valid) {
        //   if (this.form.taskId != null) {
        //     updateMarketTaskList(this.form).then(response => {
        //       this.msgSuccess('修改成功');
        //       this.open = false;
        //       this.getList();
        //     });
        //   } else {
        //     addMarketTaskList(this.form).then(response => {
        //       this.msgSuccess('新增成功');
        //       this.open = false;
        //       this.getList();
        //     });
        //   }
        // }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const taskIds = row.taskId || this.ids;
      this.$confirm('是否确认删除营销客户列表编号为"' + taskIds + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
          return delMarketTaskList(taskIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess('删除成功');
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.dgds=null
      this.download(
        'buss/taskInfo/exportMarketTaskList',
        {
          ...this.queryParams
        },
        `营销客户列表.xlsx`
      );
    }
  }
};
</script>
